import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { HotAlbumsWrapper,ContentWrapper } from './style'
import { getHotAlbumsAction } from '../../store/actionCreators'
import { formatImg } from '@/utils/format'
import useShowAlbumDetail from '@/hooks/useShowAlbumDetail'
export default memo(function HotAlbums() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getHotAlbumsAction())
  }, [dispatch])
  const { hotAlbums } = useSelector(state => ({
    hotAlbums: state.getIn(['album','hotAlbums'])
  }), shallowEqual)
  const goToAlbumDetail = useShowAlbumDetail()
  const albums = hotAlbums || []
  return (
    <HotAlbumsWrapper>
      <h2 className='title'>热门新碟</h2>
      <ContentWrapper>
        {
          albums.slice(0,10).map(item => {
            return (
              <div className="item" key={item.id} onClick={e => goToAlbumDetail(item.id)}>
                <img src={formatImg(item.picUrl,130)} alt="" className="image"/>
                <div className="mask sprite_covor"></div>
                <div className="name text-nowrap">{item.name}</div>
                <div className="artist text-nowrap">{item.artist.name}</div>
                <div className="play sprite_icon"></div>
              </div>
            )
          })
        }
      </ContentWrapper>
    </HotAlbumsWrapper>
  )
})
